<template>
  <view :class="{ acitve: props.active, center: props.center }" class="tag">{{ props.label }}</view>
</template>
<script>
export default {
  options: {
    virtualHost: true
  }
};
</script>
<script setup>
import { defineProps } from 'vue';
let props = defineProps({
  label: {
    type: String,
    default: ''
  },
  active: {
    type: Boolean,
    default: false
  },
  center: {
    type: Boolean,
    default: false
  }
});
</script>

<style lang="scss" scoped>
.tag {
  padding: 10rpx;
  border-radius: 56rpx;
  transition: all 0.3s;
  margin-bottom: 10rpx;
}
.acitve {
  background-color: $dance-main-color;
}
.center {
  text-align: center;
}
</style>
